<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view 层 模板-->
<div id="app">

    <p>有序列表:</p>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

    <p>无序列表:</p>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <!-- 组件,传递给组件中的值:props -->

    <ul>
    <mycomponent v-for="item in items" v-bind:data="item"></mycomponent>
    </ul>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //定义一个主键 component
    Vue.component("mycomponent",//组件名称
        {
            props:['data'],// v-bind:data 绑定props属性
            template: '<li>{{data}}</li>'
        });
    var vm = new Vue({
        el:"#app",
        //model :数据
        data:{
            message:"hello vue!",
            list:[
                {message : "sajdnka"},
                {message : "时间哦ID撒"},
                {message : "哈是嗲hi"}
            ],
            items:["打死你看见的呢",'adhiuasbi','阿萨德能卡死吧']
        }
    });

</script>
</body>
</html>
